<template>
        <component
            ref="chartComponent"
            :config="config"
            :is="chartComponent"
            :viewKey="viewKey"
            @setChartComponent="setChartComponent"
            class="pie-wrap">
        </component>
</template>

<script>
/**
 * 自定义页面(图表)
 */

import  chartComponents from "./chartComponent/index.js"
import FormCustomPublic from "../FormCustomPublic.js";
import BusEvent from "../BusEvent";
export default {
    name: "chartView",
    mixins:[chartComponents,BusEvent,FormCustomPublic],
    props: {
        config: {
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            chartComponent: "",
        }
    },
    created() {
        this.setChartComponent(this.config);
    },
    methods: {
        setChartComponent(config) {
            if (config.reportType) {
                this.chartComponent = config.reportType + "Component";
            }
        },
        handPublicReceive(conf) {
            if (this.$refs.chartComponent.handPublicReceive) {
                this.$refs.chartComponent.handPublicReceive(conf);
            }
        }
    },
    watch: {
        config: {
            handler: function (val, oldVal) {
                if (val) {
                    this.setChartComponent(val);
                }
            },
            deep: true
        }
    },
}
</script>

<style scoped>
.pie-wrap {
    width: 100%;
    height: 100%;
    border: 1px solid #dadde0;
    background: #fff;
}
</style>
